<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple DOM example</title>
  </head>
  <body>
      <section>
        <img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.">
        <p>Here we will add a link to the <a href="https://www.mozilla.org/">Mozilla homepage</a></p>
      </section>

      <script>
          var link = document.querySelector('a');
          link.textContent = 'Mozilla Developer Network';
          link.href = 'https://developer.mozilla.org';

          var sect = document.querySelector('section');

          var para = document.createElement('p');
          para.textContent = 'We hope you enjoyed the ride.';

          sect.appendChild(para);

          var text = document.createTextNode(' — the premier source for web development knowledge.');
          
          var linkPara = document.querySelector('p');
          linkPara.appendChild(text);

          sect.appendChild(linkPara);
          sect.removeChild(linkPara);

          para.style.color = 'white';
          para.style.backgroundColor = 'black';
          para.style.padding = '10px';
          para.style.width = '250px';
          para.style.textAlign = 'center';

      </script>
  </body>
</html>